<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
>
<head>
  <meta charset="utf-8">
  <title>政务信息资源服务平台</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css"/>
  <link rel="icon" sizes="192x192" href="static/assets/logo.png">
  <link rel="stylesheet" href="static/layui/css/layui.css">
  <link rel="stylesheet" href="static/layui/css/admin.css">
  <link rel="stylesheet" href="static/css/common.css">
  <link rel="stylesheet" type="text/css" href="static/css/iconfont.css">
  <style>
    html, body {
      background: #FFFFFF;
    }

    .layadmin-takerates .layui-progress {
      margin-top: 36px !important;
    }

    .layadmin-takerates .layui-progress-text {
      top: -25px;
    }

    .head.scroll-to-fixed-fixed {
      box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    }

    .head {
      background-color: #FFFFFF;
    }

    .cl {
      zoom: 1;
    }

    .head .head_container {
      height: 80px;
      padding-right: 30px;
      padding-left: 30px;
    }

    .head .head_container, .foot .foot_container {
      margin: 0 auto;
      max-width: 100%;
    }

    .head .menu ul.menu_list li.current a {
      color: #08B8DA;
    }

    .head .logo {
      float: left;
      height: 80px;
    }

    .head .logo img {
      height: 32px;
      vertical-align: middle;
      display: inline-block;
    }

    .head .logo h1 {
      line-height: 80px;
      margin-left: 5px;
      font-size: 20px;
      font-weight: 400;
      vertical-align: middle;
      display: inline-block;
    }

    .head .menu {
      float: right;
      position: relative;
    }

    .head .menu .menu_more {
      display: none;
    }

    .head .menu ul.menu_list {
      list-style: none;
    }

    .head .menu ul.menu_list li {
      float: left;
      height: 80px;
      line-height: 80px;
      font-size: 17px;
    }

    .head .menu ul.menu_list li a {
      padding: 0 15px;
      color: #4B4B4B;
    }

    .head .menu ul.menu_list li .btn_login {
      margin-left: 30px;
      border: 1px solid #9F9F9F;
      background-color: #FFFFFF;
      color: #4B4B4B;
    }

    .head .menu ul.menu_list li .btn_reg {
      margin-left: 10px;
      border: 1px solid #08B8DA;
      background-color: #08B8DA;
      color: #FFFFFF;
    }

    .head .menu ul.menu_list li .btn_login, .head .menu ul.menu_list li .btn_reg {
      display: inline-block;
      width: 70px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 3px;
    }

    .head .menu ul.menu_list li .btn_login, .head .menu ul.menu_list li .btn_reg {
      display: inline-block;
      width: 70px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 3px;
    }

    .back_search {
      margin-top: 80px;
      background-image: url(static/assets/search-cover.jpg);
      height: 250px;
      background-size: cover;
      background-color: rgba(0, 0, 0, 0.25);
    }

    .back-mask {
      margin-top: 80px;
      height: 250px;
      background-size: cover;
      background-color: rgba(0, 0, 0, 0.15);
    }

    .divline {
      height: 125px;
      padding-top: 80px;
      width: 620px;
      margin: 0px auto;
    }

    .search {
      max-width: 580px;
      margin: auto;
      overflow: hidden;
      min-height: 40px;
      background: #FFF;
      border-radius: 4px;
      /*box-shadow: 0px 2px 3px 0px rgba(50, 90, 135, 0.44);*/
      height: 44px;
      float: left;
    }

    .ser_tit {
      width: 450px;
      display: block;
      float: left;
      border: none;
      height: 44px;
      background: none;
      line-height: 44px;
      font-size: 14px;
      font-family: "microsoft yahei", Arial;
      padding-left: 0px;
      border-radius: 0px;
      margin-left: 10px;
      outline: none;
    }

    .ser_sub, .ser_sub:hover {
      width: 20px;
      height: 20px;
      display: block;
      float: right;
      border: none;
      background: #FFF;
      color: #000;
      text-align: center;
      border-radius: 0px;
      padding-left: 0px;
      cursor: pointer;
      margin: 12px 12px 12px 0px;
      background: url(static/assets/search.png) no-repeat;
    }

    .hot-search {
      max-width: 946px;
      margin: 20px auto;
      color: #ffffff;
    }

    .hot-search ul li {
      display: inline;
      margin-left: 5px;
    }

    .hot-search ul li:first-child {
      display: inline;
      font-weight: bold;
      margin-right: 10px;
    }

    .hot-search ul li a {
      color: #FFFFFF;
      text-decoration: underline;
    }

    .layui-col-xs6, .layui-col-sm6, .layui-col-md4 {
      padding: 10px;
    }

    .total-count {
      margin-left: 8.33333333%;
      margin-top: 15px;
      margin-bottom: 15px;
    }

    .total-count span {
      color: #FF821D;
      margin: 0 5px;
    }

    .cr-company-card {
      cursor: pointer;
      box-sizing: border-box;
      display: inline-block;
      background-color: #fff;
      overflow: hidden;
      position: relative;
      border: 1px solid #ededed;
      padding: 15px 20px;
      width: 100%;
      min-height: 132px;
    }

    .cr-company-card-title {
      font-size: 16px;
      line-height: 16px;
      margin-top: 0;
      margin-bottom: 18px;
      min-height: 16px;
      color: #000;
    }

    .cr-company-card p, .cr-company-card-title {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .cr-company-card-title .title-content {
      float: left;
      max-width: 295px;
      margin-right: 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .cr-company-card .mark-1 {
      color: #000;
    }

    .cr-company-card-main > p {
      margin-top: 8px;
      min-height: 12px;
      font-size: 12px;
      line-height: 12px;
      color: #999;
    }

    .item.data .inner table {
      width: 1140px;
      margin: auto;
      border: none;
    }

    .item.data .inner table td {
      width: 20%;
      height: 132px;
      text-align: center;
      vertical-align: middle;
      border: none;
      font-family: 'Hiragino Sans GB', "microsoft yahei";
    }

    table td {
      height: 40px;
      border: 1px solid #eef1f7;
      line-height: 24px;
      color: #666;
    }

    .item.data .inner table td .num {
      font-size: 18px;
      color: #30435b;
    }

    .item.data .inner table td .num em {
      font: 400 36px/1.1em 'Hiragino Sans GB', "microsoft yahei";
    }

    .item.data .inner table td .des {
      display: block;
      padding-top: 4px;
      font-size: 18px;
      color: #30435b;
      letter-spacing: 2px;
    }

    @media screen and (min-width: 1500px) {
      .item.data .inner {
        margin: auto;
        background: url(static/assets/data-bg.jpg) 0 200px no-repeat fixed;
        background-size: 100% auto;
        text-align: center;
      }
    }

    .item.data .inner {
      width: 100%;
      margin: auto;
      padding: 42px 0;
      background: url(static/assets/data-bg.jpg) 0 200px no-repeat fixed;
      background-size: 100% auto;
      text-align: center;
    }

    .popover {
      display: none;
      position: absolute;
      min-width: 150px;
      width: 500px;
      background: #ffffff;
      z-index: 100;
      border: 1px solid #ebeef5;
      padding: 12px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
      border-radius: 2px;
      top: 210px;
      left: 600px;
    }

    .layui-form-select dl dd.layui-this {
      background-color: #46A0FC !important;
    }

    .my-card {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    }

    .doc-title {
      font-weight: bold !important;
      font-size: 14px;
    }

    .doc-content {
      margin-top: 3px;
      margin-bottom: 16px;
    }

    .card-bottom-menu {
      float: right;
    }

    .card-bottom-menu a {
      color: #409EFF;
    }

    .el-button {
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      background: #fff;
      border: 0;
      color: #606266;
      -webkit-appearance: none;
      text-align: center;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      outline: 0;
      margin: 0;
      -webkit-transition: .1s;
      -o-transition: .1s;
      transition: .1s;
      padding: 0px 20px;
      font-size: 14px;
      border-radius: 4px;
      color: #409EFF;
      font-weight: bold;
    }

    #result_wrapper {
      padding-top: 10px;
      padding-bottom: 10px;
    }

    em {
      color: red;
      font-style: normal;
    }

    #result_tpye_list {
      display: none;
    }

    #result_tpye_list ul li {
      font-size: 14px;
      line-height: 14px;
      margin-bottom: 10px;
    }

    #result_tpye_list ul li a {
      color: #aa00aa;
      text-decoration: underline;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="head cl scroll-to-fixed-fixed" id="head"
       style="z-index: 1000; position: fixed; top: 0px; margin-left: 0px; width: 100%; left: 0px;">
    <div class="head_container">
      <a href="/index" class="logo" title="政务信息资源共享平台">
        <img src="static/assets/decision-icon.png" alt="">
        <h1>基础数据管理</h1>
      </a>
    </div>
  </div>
  <div class="back_search">
    <div class="back-mask">
      <div class="divline">
        <div class="search widget">
          <div class="autocomplete-append">
            <input type="text" placeholder="请输入关键词进行搜索" id="autocomplete"
                   class="ser_tit ui-autocomplete-input" autocomplete="off">
            <div class="ser_sub" id="autocompletebtn"></div>
          </div>
        </div>
        <button style="float: left; margin-left: 20px; height: 44px;" id="advance-search"
                class="layui-btn layui-btn-normal">高级搜索
        </button>
        <div class="popover">
          <form class="layui-form" action="">
            <div class="layui-form-item">
              <label class="layui-form-label">时间范围</label>
              <div class="layui-input-block">
                <input type="text" name="doc_time" class="layui-input" id="date-range"
                       lay-filter="doc_time"
                       placeholder="不限时间">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">文档类型</label>
              <div class="layui-input-block">
                <select name="doc_type" lay-filter="doc_type">
                  <option value="">不限类型</option>
                  <option value="0">pdf</option>
                  <option value="1">word文档</option>
                  <option value="2">excel文档</option>
                  <option value="3">ppt文档</option>
                  <option value="4">html文档</option>
                </select>
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">文档大小</label>
              <div class="layui-input-block">
                <select name="doc_size" lay-filter="doc_size">
                  <option value="">不限大小</option>
                  <option value="1">0kb-128kb</option>
                  <option value="2">128kb-256kb</option>
                  <option value="3">512kb-1mb</option>
                  <option value="4">1mb-5mb</option>
                  <option value="5">5mb以上</option>
                </select>
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">搜索位置</label>
              <div class="layui-input-block">
                <select name="doc_position" lay-filter="doc_position">
                  <option value="">不限位置</option>
                  <option value="1">文档内容</option>
                  <option value="2">文档标题</option>
                </select>
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="advanced">确定
                </button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <div class="layui-container">
    <div class="total-count">共计搜索到<span id="total-count-num"></span>条符合条件的文档</div>
    <div class="layui-row" id="result_wrapper">
      <div class="layui-col-md8 layui-col-md-offset2 result-list">
      </div>
    </div>
    <div id="pager" style="float: right; margin-right: 8.3333333%"></div>
  </div>
</div>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script src="static/layui/layui.js"></script>
<script src="static/js/common.js"></script>
<script type="text/javascript">
    $('.total-count').hide();
    var laypage = null;
    var laydate = null;
    var form = null;
    var paramsJson = {};
    paramsJson.docSizeLevel = 0;
    paramsJson.wordsLocation = 0;
    paramsJson.docType = 'all';
    layui.use(['laypage', 'layer', 'laydate', 'form'], function () {
        laypage = layui.laypage;
        laydate = layui.laydate;
        form = layui.form;
        var keyword = getUrlParam("keyword");
        laydate.render({
            elem: '#date-range',
            type: 'date',
            range: true
        });
        if (keyword != null) {
            $("#autocomplete").val(decodeURI(keyword));
            getResult(1)
        }
        form.on('submit(advanced)', function (data) {
            var time_range = data.field.doc_time;
            if (time_range !== "") {
                var startTime = time_range.split(' - ')[0];
                var endTime = time_range.split(' - ')[1];
                paramsJson.dateStart = new Date(startTime).valueOf();
                paramsJson.dateEnd = new Date(endTime).valueOf();
            } else {
                delete paramsJson.dateStart;
                delete paramsJson.dateEnd;
            }
            paramsJson.docSizeLevel = data.field.doc_size === "" ? 0 : data.field.doc_size;
            paramsJson.wordsLocation = data.field.doc_position === "" ? 0 : data.field.doc_position;
            var docType = null;
            if (data.field.doc_type === "") {
                docType = 'all';
            } else if (data.field.doc_type === "0") {
                docType = 'pdf';
            } else if (data.field.doc_type === "1") {
                docType = 'word';
            } else if (data.field.doc_type === "2") {
                docType = 'excel';
            } else if (data.field.doc_type === "3") {
                docType = 'powerpoint';
            } else if (data.field.doc_type === "4") {
                docType = 'html';
            }
            paramsJson.docType = docType;
            console.log(JSON.stringify(paramsJson));
            $(".popover").hide();
            return false;
        });
    });


    function getResult(page) {
        $('.total-count').hide();
        $('#result_tpye_list').hide();
        $('.data').hide();
        paramsJson.words = $('.ser_tit').val();
        var params = {};
        params.paramsJson = JSON.stringify(paramsJson);
        params.page = page;
        params.limit = 10;
        $.ajax({
            url: './doc/searchDoc',
            type: 'POST',
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            data: params,
            success: function (result) {
                console.log(result);
                $('.result-list').empty();
                var content = "";
                result.data.forEach(function (o) {
                    content +=
                        '<div class="layui-card my-card">' +
                        '<div class="layui-card-body">' +
                        '<h4 class="doc-title">' + o.docTitle + '</h4>' +
                        '<div class="doc-content">' + o.docContent + '</div>' +
                        '<div class="doc-type-size">' + '文档类型:<span>' + '</span> 文档大小: <span>' + parseInt(o.docSize) + 'kb</span></div>' +
                        '<div><div style="float: left">文档上传时间:<span>' + o.docCreateDate + '</span></div>' +
                        '<div class="card-bottom-menu">' +
                        (o.docConvert === 1 ? '<button class="el-button" onclick="previewPdf(\'' + o.docId + '\')">预览</button>' : '<button class="el-button" disabled>无法预览</button>') +
                        '<button class="el-button" onclick="downFile(\'' + o.docId + '\')">下载原文档</button>' +
                        '</div>' +
                        '</div>' +
                        '<div style="clear: both"></div>' +
                        '</div>' +
                        '</div>';
                });
                $('.result-list').html(content);
                $('.total-count').show();
                $('#result_tpye_list').show();
                $('#total-count-num').text(result.count);
                $(window).scrollTop(0);
                laypage.render({
                    elem: 'pager',
                    count: result.count, //数据总数
                    curr: page,
                    jump: function (obj, first) {
                        if (!first) {
                            getResult(obj.curr);
                        }
                    }
                });
            }
        });
    }

    $('#autocompletebtn').click(function () {
        return getResult(1);
    });

    document.onkeydown = function (e) {
        if (!e) e = window.event;
        if ((e.keyCode || e.which) === 13) {
            getResult(1);
        }
    }

    $('#advance-search').click(function (event) {
        $(".popover").show();
        event = event || window.event;
        event.stopPropagation();
    });

    function previewPdf(docId) {
        var pdfUrl = "/doc/pdfFile?docId=" + docId;
        pdfUrl = encodeURIComponent(pdfUrl);
        window.open("./pdfview?pdfUrl=" + pdfUrl);

    }

    function downFile(docId) {
        window.location = "./doc/downloadDocFile?docId=" + docId;
    }
</script>
</body>
</html>